<template>
  <div>
    <crumbs :title="'消息通知'"></crumbs>
    <div class="container">
      <div class="handle-box">
        发送时间:<el-date-picker
          v-model="Search_form.orderTimeStart"
          type="datetime"
          @change="formatStartData"
          placeholder="开始时间"
        >
        </el-date-picker>
        -
        <el-date-picker
          @change="formatEndData"
          v-model="Search_form.orderTimeEnd"
          type="datetime"
          placeholder="结束时间"
        >
        </el-date-picker>

        <el-button
          style="margin-left:10px"
          type="primary"
          icon="search"
          @click="search"
          >查询</el-button
        >
        <el-button
          style="margin-left:10px"
          type="primary"
          icon="add"
          @click="add"
          >新建</el-button
        >
      </div>
      <el-table
        :data="dataArr"
        border
        class="table"
        ref="multipleTable"
        v-loading="loading"
      >
        <el-table-column
          :show-overflow-tooltip="true"
          type="index"
          label="序号"
          align="center"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="content"
          align="center"
          label="消息内容"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="createUserName"
          align="center"
          label="创建人员"
        ></el-table-column>
        <el-table-column
          :formatter="formatDate"
          :show-overflow-tooltip="true"
          prop="createTime"
          align="center"
          label="创建时间"
        ></el-table-column>
      </el-table>
      <div align="center" style="margin-top: 10px;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="PageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="新增/编辑" :visible.sync="editVisible" width="55%">
      <el-form ref="userform" :model="sendData" label-width="100px">
        <el-row :gutter="12">
          <el-col :span="18">
            <el-form-item
              label="通知人群"
              prop="userType"
              :rules="[
                {
                  required: true,
                  message: '该项不能为空',
                  trigger: 'blur'
                }
              ]"
            >
              <el-select
                v-model="sendData.userType"
                placeholder="请选择通知人群"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item
              label="推送内容"
              prop="content"
              :rules="[
                {
                  required: true,
                  message: '该项不能为空',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input
                :rows="15"
                type="textarea"
                v-model="sendData.content"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="$store.state.requestLoading"
          @click="saveEdit('form')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import crumbs from "../../views/Crumbs.vue";

export default {
  name: "",
  components: {
    crumbs
  },
  data() {
    return {
      loading: false,
      dataArr: [],
      totalCount: 0,
      currentPage: 1,
      PageSize: 6,
      editVisible: false,
      //推送消息
      sendData: {
        content: null,
        userType: "all"
      },
      Search_form: {
        orderTimeStart: null,
        orderTimeEnd: null
      },
      options: [
        {
          label: "普通用户",
          value: "user"
        },
        {
          label: "vip用户",
          value: "vip"
        },
        {
          label: "全部",
          value: "all"
        }
      ]
    };
  },
  mounted() {
    this.getnoticeQueryNotice();
  },
  methods: {
    ensure() {
      this.$confirm("是否要继续发送?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.sendNotice({ ...this.sendData }).then(res => {
            if (res.success) {
              this.$message({
                type: "success",
                message: "发送成功!"
              });
              this.getnoticeQueryNotice();
            } else {
              this.$message.error("发送失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "发送失败"
          });
        });
    },
	search(){
		this.currentPage=1;
		this.getnoticeQueryNotice()
	},
    add() {
      this.sendData = {
        content: null,
        userType: "all"
      };
      this.editVisible = true;
    },
    saveEdit() {
      this.$refs.userform.validate(valid => {
        if (valid) {
			this.ensure();
        }
      });
    },
    getnoticeQueryNotice() {
      this.loading = true;
      this.$axios
        .noticeQueryNotice({
          pageSize: this.PageSize,
          pageNo: this.currentPage,
		  startTime:this.Search_form.orderTimeStart,
		  endTime:this.Search_form.orderTimeEnd,
        })
        .then(res => {
          this.dataArr = res.data.records;
          this.totalCount = res.data.total;
          this.loading = false;
        });
    },
    formatDate(row) {
      return this.formatTimes(row.createTime);
    },
	formatStartData(row){
		this.Search_form.orderTimeStart= this.formatTimes(row)
	},
	formatEndData(row){
		this.Search_form.orderTimeEnd= this.formatTimes(row)
	},
    // 显示第几页
    handleCurrentChange(val) {
      console.log(val);
      // 改变默认的页数
      this.currentPage = val;
      // 切换页码时，要获取每页显示的条数
      this.getnoticeQueryNotice();
    }
  }
};
</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.crumbs {
  margin: 10px 0;
}

.mr10 {
  margin-right: 10px;
}

.handle-select {
  width: 120px;
}

.container {
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.clearfix {
  content: "";
  display: block;
  clear: both;
}
</style>
